<template>
    <div class="page-container">
        <el-form  :inline="true" size="medium" @submit.native.prevent>
            <el-form-item label="检测批次">
                <!-- <el-date-picker
                    v-model="form.detectionBatch"
                    type="year"
                    format="yyyy年路网检测"
                    value-format="yyyy年路网检测"
                    :clearable="false"
                    placeholder="请选择"
                    :picker-options="datePickerOptions"
                >
                </el-date-picker> -->
                <el-select v-model="form.detectionBatch" placeholder="请选择" style="width: 100%">
                    <el-option v-for="d in detectionBatchOptions" :key="d.value" :label="d.label" :value="d.label" />
                </el-select>
            </el-form-item>
            <!-- <el-form-item label="管养单位">
                <el-select v-model="form.orgName" placeholder="请选择" clearable style="width: 100%">
                    <el-option v-for="item in managementOfficeOptions" :key="item.value" :label="item.label" :value="item.label" />
                </el-select>
            </el-form-item> -->
            <el-form-item label="选择决策项目">
                <el-select v-model="form.decisionItemId" placeholder="请选择" clearable style="width: 100%">
                    <el-option v-for="d in options" :key="d.value" :label="d.label" :value="d.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="公路">
                <!-- <AssetsRoadSelect :value.sync="form.highwayCode" clearable placeholder="请选择" /> -->
                <el-select v-model="highwayCode" placeholder="请选择" filterable clearable style="width: 100%" @change="highwayCodeChange">
                    <el-option v-for="item in highwayOptions" :key="item.value" :label="item.label" :value="item.label" />
                </el-select>
            </el-form-item>
            <el-form-item label="分析年限">
                <el-input-number v-model.trim="form.analyseYear" :step="1" :precision="0" :min="1" :max="10" clearable placeholder="请输入">
                    <!-- <template slot="prepend">-</template>
                    <template slot="append">+</template> -->
                </el-input-number>
            </el-form-item>
            <el-form-item label="评定区间">
                <el-row class="filter-stake">
                    <el-col :span="6" class="start-stake">
                        <el-input
                            v-model="form.startStake1"
                            clearable
                            type="number"
                            oninput="if(value.length > 3) value = value.slice(0, 3)"
                            @keydown.native="onKeydown($event)"
                        >
                            <template slot="prepend">K</template>
                        </el-input>
                    </el-col>
                    <el-col :span="5" class="end-stake">
                        <el-input
                            v-model="form.startStake2"
                            clearable
                            type="number"
                            oninput="if(value.length > 3) value = value.slice(0, 3)"
                            @keydown.native="onKeydown($event)"
                        >
                            <template slot="prepend">+</template>
                        </el-input>
                    </el-col>
                    <el-col :span="2" style="text-align:center;">~</el-col>
                    <el-col :span="6" class="start-stake">
                        <el-input
                            v-model="form.endStake1"
                            clearable
                            type="number"
                            oninput="if(value.length > 3) value = value.slice(0, 3)"
                            @keydown.native="onKeydown($event)"
                        >
                            <template slot="prepend">K</template>
                        </el-input>
                    </el-col>
                    <el-col :span="5" class="end-stake">
                        <el-input
                            v-model="form.endStake2"
                            clearable
                            type="number"
                            oninput="if(value.length > 3) value = value.slice(0, 3)"
                            @keydown.native="onKeydown($event)"
                        >
                            <template slot="prepend">+</template>
                        </el-input>
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item>
                <BaseButton v-permission="{ btnCode: 'dlyh_c57_d255_2' }" @click="handleFilter">分析</BaseButton>
            </el-form-item>
        </el-form>
        <Kline :line-data="list" />
        <BaseTable
            v-loading="listLoading"
            :columns="columns"
            :data="list"
            row-key="id"
            height="calc(100% - 500px)"
            highlight-current-row
            border
            >
            <template #highwayName="{ scope: { row } }">
                <span>{{ row.highwayCode+'/'+row.highwayName }}</span>
            </template>
        </BaseTable>
    </div>
</template>

<script>
import { PerformanceForecastModel, DecisionItemModel, ManagementOfficeModel, LineHighwayModel, RoadSectionSelectModel } from '@/models'
import Kline from './components/Kline'

const nowYear = new Date().getFullYear().toString() + '年路网检测'
export default {
    components: {
        Kline
    },
    props: {

    },
    data() {
        return {
            managementOfficeModel: new ManagementOfficeModel(),
            model: new PerformanceForecastModel(),
            decisionItemModel: new DecisionItemModel(),
            lineHighwayModel: new LineHighwayModel(),
            roadSectionSelectModel: new RoadSectionSelectModel(),
            highwayCode: '',
            form: {
                detectionBatch: '',
                analyseYear: 10,
                orgName: '',
                highwayCode: '',
                startStake1: '',
                startStake2: '',
                endStake1: '',
                endStake2: '',  
            },
            detectionBatchOptions: [],
            options: [],
            managementOfficeOptions: [],
            highwayOptions: [],
            listLoading: false,
            list: [],
            page: {
                pageNo: 1,
                pageSize: 10,
                total: 0
            },
            datePickerOptions: {
                disabledDate(date) {
                    return date.getFullYear() > new Date().getFullYear()
                }
            },
            columns: Object.freeze([
                {
                    slot: 'highwayName',
                    attrs: {
                        prop: 'highwayName',
                        label: '路线名称/编码',
                        'show-overflow-tooltip': true,
                        width: '150'
                    }
                },
                {
                    attrs: {
                        prop: 'startStakeNo',
                        label: '起点桩号',
                        'show-overflow-tooltip': true,
                        // width: '120'
                    }
                },
                {
                    attrs: {
                        prop: 'endStakeNo',
                        label: '终点桩号',
                        'show-overflow-tooltip': true,
                        // width: '120'
                    }
                },
                {
                    attrs: {
                        prop: 'length',
                        label: '长度',
                        'show-overflow-tooltip': true,
                        // width: '100'
                    }
                },
                {
                    attrs: {
                        prop: 'forecastYear',
                        label: '预测年度',
                        'show-overflow-tooltip': true,
                        // width: '100'
                    }
                },
                {
                    attrs: {
                        prop: 'PQI',
                        label: 'PQI',
                        'show-overflow-tooltip': true,
                        // width: '100'
                    }
                },
                {
                    attrs: {
                        prop: 'PCI',
                        label: 'PCI',
                        'show-overflow-tooltip': true,
                        // width: '100'
                    }
                },
                {
                    attrs: {
                        prop: 'RQI',
                        label: 'RQI',
                        'show-overflow-tooltip': true,
                        // width: '100'
                    }
                },
                {
                    attrs: {
                        prop: 'RDI',
                        label: 'RDI',
                        'show-overflow-tooltip': true,
                        // width: '100'
                    }
                },
                {
                    attrs: {
                        prop: 'SRI',
                        label: 'SRI',
                        'show-overflow-tooltip': true,
                        // width: '100'
                    }
                }
            ]),
        }
    },
    computed: {

    },
    watch: {

    },
    created() {
        this.getDetectionBatchList()
        this.getHighwayList()
        this.getManagementOfficeList()
        this.getDecisionList()
        // this.getList()
    },
    mounted() {

    },
    methods: {
        getDetectionBatchList() {
            this.roadSectionSelectModel
                .detectionBatchList({})
                .then((res) => {
                    this.detectionBatchOptions = (res.list || []).map(item => {
                        return {
                            value: item,
                            label: item
                        }
                    })
                    this.form.detectionBatch = this.detectionBatchOptions[0].label
                })
        },
        getHighwayList() {
            this.lineHighwayModel.getList({}, { pageNo: 1, pageSize: 10000 }).then(res => {
                this.highwayOptions = (res.list || []).map(item => {
                    return {
                        label: item.code + '/' + item.name,
                        value: item.code
                    }
                })
            })
        },
        highwayCodeChange() {
            this.form.highwayCode = this.highwayCode.split('/')[0]
            this.form.highwayName = this.highwayCode.split('/')[1]
        },
        // 获取管理处列表，作为下拉选项
        getManagementOfficeList() {
            this.managementOfficeModel.getList({}, { pageNo: 1, pageSize: 10000 }).then(res => {
                this.managementOfficeOptions = (res.list || []).map(item => {
                    return {
                        value: item.id,
                        label: item.name
                    }
                })
            })
        },
        getDecisionList() {
            this.decisionItemModel
                .getList({}, {pageNo: 1, pageSize: 10000})
                .then((res) => {
                    this.options = (res.list || []).map(item => {
                        return {
                            value: item.id,
                            label: item.decisionItemName
                        }
                    })
                })
        },
        getList() {
            const { startStake1, startStake2, endStake1, endStake2 } = this.form
            const startStakeNo = startStake1 && startStake2 ? `K${startStake1}+${startStake2}` : ''
            const endStakeNo = endStake1 && endStake2 ? `K${endStake1}+${endStake2}` : ''
            this.listLoading = true
            this.model
                .analyse({...this.form, startStakeNo, endStakeNo})
                .then((res) => {
                    console.log('res>>', res)
                    this.list = (res || [])
                    this.page.total = res.totalCount
                })
                .finally(() => {
                    this.listLoading = false
                })
        },
        // 查询
        handleFilter() {
            this.page.pageNo = 1
            this.getList()
        },
        onKeydown(e) {
            if (e.key === 'e' || e.key === '-' || e.code === 'Minus') {
                e.preventDefault()
            }
        }
    },
}
</script>

<style scoped lang="scss">
.page-container{
    width: 100%;
    height: 100%;
    border: 1px solid #f0f4f7;
    box-shadow: 0px 0px 4px 0px rgba(131, 145, 178, 0.14);
    padding: 24px 16px;
    .filter-stake {
    width: 500px;
    ::v-deep {
        .el-input__inner,
        .el-input {
            min-width: auto !important;
            line-height: 1px !important;
        }
        .el-input-group__append,
        .el-input-group__prepend {
            padding: 0 8px;
            color: #44444f;
        }
    }
    .start-stake {
        position: relative;
        z-index: 1;
        margin-right: -1px;
        ::v-deep {
            .el-input__inner,
            .el-input {
                border-radius: 0;
            }
        }
    }
    .end-stake {
        ::v-deep {
            .el-input-group__append,
            .el-input-group__prepend {
                border-radius: 0;
            }
        }
    }
}
}
</style>
